<script>
import axios from 'axios'
import echarts from 'echarts'

const Tabs = (h, vm) => {
  const tabPanesEl = []
  const tabPanesArr = [
    { label: '水位曲线图', name: 'echart' },
    { label: '基础信息', name: 'info' }
  ]

  tabPanesArr.map(item => {
    tabPanesEl.push(
      h('TabPane', {
        props: item
      })
    )
  })

  return h('div', { class: 'GykjMap-tideGauge-tabs' }, [
    h('Tabs', {
      props: {
        type: 'card',
        animated: false,
        value: vm.activeTab
      },
      on: {
        'input': (value) => {
          vm.activeTab = value
        }
      }
    }, tabPanesEl)
  ])
}

const Echart = (h, vm) => {
  const renderContent = [
    h('div', { class: vm.showEchart ? 'GykjMap-tideGauge-echartData' : 'GykjMap-tideGauge-echartData hide', ref: 'echart' }),
    h('div', { class: vm.showEchart ? 'GykjMap-tideGauge-echartNodata hide' : 'GykjMap-tideGauge-echartNodata' })
  ]

  return h('div', {
    class: vm.activeTab === 'echart' ? 'GykjMap-tideGauge-echart' : 'GykjMap-tideGauge-echart hide'
  }, [renderContent])
}

const Info = (h, vm) => {
  const trEl = []
  const trInfo = [
    [
      { title: '站码', key: 'stn_no' },
      { title: '站点类型', key: 'stn_type' }
    ],
    [
      { title: '站点名称', key: 'stn_name' },
      { title: '站点标签', key: 'data_tag' }
    ],
    [
      { title: '行政区域', key: 'region' },
      { title: '行政区划代码', key: 'region_code' }
    ],
    [
      { title: '站点地址', key: 'location' },
      { title: '所属河流名称', key: 'river' }
    ],
    [
      { title: '流域', key: 'basin' },
      { title: '水系', key: 'hydr_net' }
    ],
    [
      { title: '站点状态', key: 'stn_status', isStatus: true },
      { title: '备注', key: 'remark' }
    ]
  ]

  trInfo.map(trItem => {
    const tdEl = []
    trItem.map(tdItem => {
      tdEl.push(h('td', {}, tdItem.title))
      tdEl.push(h('td', {}, tdItem.isStatus ? vm.fliterStatus(tdItem.key) : vm.fliterData(tdItem.key)))
    })

    trEl.push(
      h('tr', {}, tdEl)
    )
  })

  return h('div', { class: vm.activeTab === 'info' ? 'GykjMap-tideGauge-info' : 'GykjMap-tideGauge-info hide' }, [
    h('table', { class: 'GykjMap-table', attrs: { border: true } }, [
      h('tbody', {}, trEl)
    ])
  ])
}

const Content = (h, vm) => {
  return h('div', { class: 'GykjMap-tideGauge-content' }, [
    Echart(h, vm),
    Info(h, vm)
  ])
}

const Wrapper = (h, vm) => {
  return h('div', { class: 'GykjMap-tideGauge-warpper' }, [
    Tabs(h, vm),
    Content(h, vm)
  ])
}

const Loading = (h, vm) => {
  const divArr = []
  for (let index = 0; index < 8; index++) {
    divArr.push(h('div', {}))
  }

  return h('div', { class: vm.loading ? 'GykjMap-loading-box' : 'GykjMap-loading-box hide' }, [
    h('div', { class: 'GykjMap-loading-wrapper' }, [
      h('div', { class: 'GykjMap-loading-content' }, [
        h('div', { class: 'loader' }, [
          h('div', { class: 'loader-inner ball-spin-fade-loader' }, divArr)
        ])
      ]),
      h('div', { class: 'GykjMap-loading-title' }, '加载中')
    ])
  ])
}

const echartExample = (data) => {
  const echartData = {
    title: {
      text: '实时水位趋势',
      x: 'center',
      top: 20
    },
    grid: {
      left: 70
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.x
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} m'
      }
    },
    series: [{
      name: '水位',
      type: 'line',
      data: data.outer
    }]
  }

  if (data.isAlertLine) {
    echartData.series[0].markLine = {
      data: [{
        yAxis: data.alarm_l2
      }, {
        yAxis: data.alarm_l1,
        lineStyle: {
          color: '#F7BA2A'
        }
      }]
    }
  }

  return echartData
}

export default {
  props: {
    stnNo: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'echart',
      showEchart: false,
      loading: false
    }
  },
  render (h) {
    return h('div', {
      class: 'GykjMap-tideGauge'
    }, [
      Wrapper(h, this),
      Loading(h, this)
    ])
  },
  methods: {
    initData (stnNo, data = {}) {
      this.resultData = data
      this.showEchart = false
      this.activeTab = 'echart'
      this.api = 'http://183.238.82.216:9080/fullservice/http/waterlevelDataReal'

      if (stnNo) {
        this.api += `?stn_no=${stnNo}`
      } else {
        if (this.source) {
          this.api = this.source
        } else if (!this.source && this.stnNo) {
          this.api += `?stn_no=${this.stnNo}`
        } else {
          return
          // throw new Error('必须传入api源地址或潮位站站码')
        }
      }

      this.getData()
    },
    getData () {
      this.loading = true

      axios.get(this.api, {})
        .then(res => {
          this.loading = false
          const data = res.data

          if (data.code === '0000' && data.result && data.result.data.length) {
            const time = []
            const inner = []
            const outer = []
            const info = data.result.data.reverse()

            info.map(item => {
              let str = item.data_time
              str = str.split(' ').join('\n')
              time.push(str)
              inner.push(item.water_level_in)
              outer.push(item.water_level)
            })
            const echartData = {
              x: time,
              inner: inner,
              outer: outer
            }

            this.initEchart(echartData)
          } else {
            this.$emit('data_err', '找不到该潮位站数据')
            console.log('找不到该水位站数据')
          }
        })
        .catch(err => {
          this.loading = false
          this.$emit('data_err', `获取该数据源失败，错误代码：${err}`)
          console.log(`获取该数据源失败，错误代码：${err}`)
        })
    },
    initEchart (data) {
      if (!data) {
        return
      }
      this.showEchart = true
      setTimeout(() => {
        if (!this.echart) {
          this.echart = echarts.init(this.$refs.echart)
        }
        this.echart.setOption(echartExample(data))
      }, 20)
    },
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterStatus (key) {
      if (this.resultData[key] === 1) {
        return '正常'
      } else {
        return '停用'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-tideGauge {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .GykjMap-tideGauge-warpper {
    width: 100%;
    height: 100%;
    .GykjMap-tideGauge-tabs {
      width: 100%;
      height: 42px;
      overflow: hidden;
      padding: 5px;
    }
    .GykjMap-tideGauge-content {
      width: 100%;
      height: calc(100% - 37px);
      position: relative;
      overflow: hidden;
      .GykjMap-tideGauge-echart {
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
        padding: 5px;
        &.hide {
          display: none;
        }
        .GykjMap-tideGauge-echartData {
          width: 100%;
          height: 100%;
          &.hide {
            display: none;
          }
        }
        .GykjMap-tideGauge-echartNodata {
          width: 100%;
          height: 100%;
          text-align: center;
          background-image: url("./img/noCount.png");
          background-position: center 35%;
          background-repeat: no-repeat;
          &.hide {
            display: none;
          }
        }
      }
      .GykjMap-tideGauge-info {
        width: 100%;
        height: 100%;
        padding: 5px;
        overflow-y: auto;
        &.hide {
          display: none;
        }
        .GykjMap-table {
          width: 100%;
          font-size: 14px;
          border: 1px solid #ddd;
          margin-bottom: 5px;
          td {
            width: 25%;
            padding: 5px;
          }
        }
      }
    }
  }

  .GykjMap-loading-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    user-select: none;
    &.hide {
      display: none;
    }
    .GykjMap-loading-wrapper {
      width: 80px;
      height: 80px;
      padding: 10px 0;
      background-color: rgba(0, 0, 0, .6);
      border-radius: 5px;
      position: absolute;
      box-sizing: border-box;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      color: white;
      text-align: center;
      .GykjMap-loading-content {
        width: 100%;
        text-align: center;
        .loader {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          flex: 0 1 auto;
          flex-direction: column;
          flex-grow: 1;
          flex-shrink: 0;
          flex-basis: 25%;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 0;
          right: 0;
          top: -10px;
          margin: auto;
          transform: scale(0.35);
        }
        @-webkit-keyframes ball-spin-fade-loader {
          50% {
              opacity: 0.3;
              -webkit-transform: scale(0.4);
              transform: scale(0.4);
          }
          100% {
              opacity: 1;
              -webkit-transform: scale(1);
              transform: scale(1);
          }
        }
        @keyframes ball-spin-fade-loader {
          50% {
              opacity: 0.3;
              -webkit-transform: scale(0.4);
              transform: scale(0.4);
          }
          100% {
              opacity: 1;
              -webkit-transform: scale(1);
              transform: scale(1);
          }
        }
        .ball-spin-fade-loader {
          position: relative;
        }
        .ball-spin-fade-loader > div:nth-child(1) {
          top: 32px;
          left: -12px;
          -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
          animation: ball-spin-fade-loader 1s 0s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(2) {
          top: 17.04545px;
          left: 17.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
          animation: ball-spin-fade-loader 1s 0.12s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(3) {
          top: -12px;
          left: 32px;
          -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
          animation: ball-spin-fade-loader 1s 0.24s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(4) {
          top: -40.04545px;
          left: 17.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
          animation: ball-spin-fade-loader 1s 0.36s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(5) {
          top: -52px;
          left: -12px;
          -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
          animation: ball-spin-fade-loader 1s 0.48s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(6) {
          top: -40.04545px;
          left: -40.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
          animation: ball-spin-fade-loader 1s 0.6s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(7) {
          top: -12px;
          left: -52px;
          -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
          animation: ball-spin-fade-loader 1s 0.72s infinite linear;
        }
        .ball-spin-fade-loader > div:nth-child(8) {
          top: 17.04545px;
          left: -40.04545px;
          -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
          animation: ball-spin-fade-loader 1s 0.84s infinite linear;
        }
        .ball-spin-fade-loader > div {
          background-color: #fff;
          width: 15px;
          height: 15px;
          border-radius: 100%;
          margin: 2px;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          position: absolute;
        }
      }
      .GykjMap-loading-title {
        width: 100%;
        position: absolute;
        bottom: 2px;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
